<template>
  <el-container class="main-container">
    <el-header>
      <div class="left_box">
        <div class="toggle_box" @click="toggleCoollapse">
          <i class="el-icon-s-fold"></i>
          <span>物资管理系统</span>
        </div>
<!--        <img src="../assets/img/1.gif">-->
      </div>
      <div class="right_box">
        <el-dropdown>
          <div class="right_down">
            <img :src="imageUrl">
            <span class="el-dropdown-link">
           {{ nickname }} <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-house">系统首页</el-dropdown-item>
            <el-dropdown-item icon="el-icon-ship">交流谈论</el-dropdown-item>
            <label @click="logOut()">
              <el-dropdown-item icon="el-icon-switch-button" >退出登录</el-dropdown-item>
            </label>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="isCoollapse ? '64px': '200px'">
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffd04b"
        :collapse="isCoollapse"
        :collapse-transition="false"
        :router="true"
        :default-active="activeIndex"
        >

          <MenuTree :menuList="this.MenuList"></MenuTree>
        </el-menu>
      </el-aside>
      <el-main>
        <!--路由视图-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import MenuTree from '@/components/MenuTree'
import {loginOut} from '@/api/login'

export default {
  name: 'Main',
  components:{
    MenuTree
  },
  data(){
    return{
      isCoollapse:false,
      MenuList:'',
      imageUrl:'',
      nickname:'',
      activeIndex :'/main'
    }
  },
  methods:{
    toggleCoollapse(){
      this.isCoollapse = !this.isCoollapse
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    logOut(){
      const _this = this
      loginOut()
      this.$store.commit("REMOVE_INFO")
      _this.$router.push("/login")
    },
    setCurrentRoute () {
      this.activeIndex = this.$route.path //关键   通过他就可以监听到当前路由状态并激活当前菜单
    },
  },
  watch: {
    $route () {
      this.setCurrentRoute()
    }
  },
  created () {
    this.imageUrl = this.$route.params.avatar
    this.nickname = this.$route.params.nickname
    // this.MenuList = this.$route.params.MenuList
    // this.MenuList = window.sessionStorage.getItem('menuList')
    this.MenuList = this.$store.getters.getUserMenu
    console.log(this.$store.getters.getUserMenu)
    console.log(this.MenuList)

    
    this.setCurrentRoute()

  },
  mounted () {
    this.active = this.$route.name
  }
}
</script>

<style lang="less" scoped>
  .main-container{
    height: 100%;
  }

  .el-header{
    background-color: #001529;
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
    padding-left: 0;
    align-items: center;
    font-size: 20px;
    .left_box{
      display: flex;
      align-items: center;

    }
    .right_box{

    }

  }

  .el-aside {
    background-color: #001529;

    .el-menu{
      border-right: none;
    }

    .toggle_box{
      background-color: #001529;
      font-size: 15px;
      font-weight: bold;
      line-height: 25px;
      color: #EEEEEE;
      letter-spacing: 0.2em;
      text-align: center;
      cursor: pointer;
    }
  }

  .el-main {
    background-color: #E9EEF3;
    //color: #333;
    //text-align: center;
    //line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  /*下拉菜单*/
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    margin-left: 5px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .right_down{
    display: flex;
    align-items: center;
    img{
      width: 45px;
      height: 45px;
      background-color: #001529;
      margin-top: 10px;
      border-radius: 50%;
    }
  }
</style>
